<template>
	<view class="full-page" v-if="totalPage">
		
	</view>
	<view class="invoice-box" v-else>
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="订单详情" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="invoice-box1">
			<view class="invoice-box1-top display-flex">
				<image :src="userInfo.pic | formatImgUrl"></image>
				<view class="name">
					{{userInfo.username?userInfo.username:'默认昵称'}}
				</view>
				<view class="money">
					{{orderInfo.price || ''}}
				</view>
				<view class="status2">
					<block v-if="orderInfo.type ==5  || orderInfo.type ==2">交易完成</block>
					<block v-if="orderInfo.type ==6">vip充值</block>
					<block v-if="orderInfo.type ==7">交易终止</block>
					<block v-if="orderInfo.type ==8">部分退款</block>
					<block v-if="orderInfo.type ==9">全部退款</block>
					<block v-if="orderInfo.type ==1">粮币充值</block>
					<block v-if="orderInfo.type ==3">佣金兑换</block>
				</view>
			</view>
			
			<view class="top-item display-flex just-between">
				<text class="text1">付款方式</text>
				<text class="text2">
					<block v-if="orderInfo.use_type == 1">微信</block>
					<block v-if="orderInfo.use_type == 2">粮币</block>
				</text>
			</view>
			<view class="top-item display-flex just-between">
				<text class="text1">交易类型</text>
				<text class="text2">
					<block v-if="orderInfo.type == 1">现金充值粮币</block>
					<block v-if="orderInfo.type == 2 || orderInfo.type ==5">现金订单支出</block>
					<block v-if="orderInfo.type == 3">佣金充值粮币</block>
					<block v-if="orderInfo.type == 6">开通派单功能</block>
					<block v-if="orderInfo.type == 7">订单取消</block>
					<block v-if="orderInfo.type == 8">部分退款</block>
					<block v-if="orderInfo.type == 9">全部退款</block>
				</text>
			</view>
			<view class="top-item display-flex just-between">
				<text class="text1">创建日期</text>
				<text class="text2">{{orderInfo.create_time}}</text>
			</view>
			<view class="top-item display-flex just-between">
				<text class="text1">订单编号</text>
				<text class="text2">{{orderInfo.id}}</text>
			</view>
		</view>
		
		<view class="invoice-box2">
			<view class="bot-item display-flex just-between" style="margin-top: 0;">
				<text class="text3">交易备注</text>
				<view class="display-flex">
					<text class="text4">{{orderInfo.notes || '暂无'}}</text>
					<image :src=" '/images/fapiao_r.png' | formatImgUrl"></image>
				</view>
			</view>
			<view class="bot-item display-flex just-between" v-if="!bill">
				<text class="text3">开具发票</text>
				<view class="display-flex">
					<text class="text4" v-if="orderInfo.f_status == 0" @tap="$go('/showcase/showcase/openInvoice?id='+orderInfo.id)">去开票</text>
					<text class="text4" v-if="orderInfo.f_status == 1" >开票中</text>
					<text class="text4" v-if="orderInfo.f_status == 2" @tap="$go('/showcase/showcase/openStatus?id='+orderInfo.id)">已开票</text>
					<image :src=" '/images/fapiao_r.png' | formatImgUrl"></image>
				</view>
			</view>
			<view class="bot-item display-flex just-between" @tap="$go('/showcase/user/kefuType')">
				<text class="text3">对此订单有疑问</text>
				<view class="display-flex">
					<text class="text4">去咨询</text>
					<image :src=" '/images/fapiao_r.png' | formatImgUrl"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				orderInfo: {},
				userInfo: this.$db.get('userInfo'),
				bill: '',
				totalPage: true
			}
		},
		onLoad(e) {
			if (e.id) {
				this.getOrderInfo(e.id)
			} else {
				this.$common.errorToShow('参数异常')
			}
			
			this.bill = e.bill || ''
		},
		methods:{
			getOrderInfo(id){
				this.$api.default.request('invoice/getDea', {
					id: id
				}).then((res) => {
					if (res.code) {
						this.orderInfo = res.data
					} else {
						this.$common.errorToShow(res.msg)
					}
					
					this.totalPage = false
				})
			},
			kefu(){
				wx.openCustomerServiceChat({
				  extInfo: {url: 'https://work.weixin.qq.com/kfid/kfcf6e13cdfaad774ff'},
				  corpId: 'wwff81ee3e67679806',
				  success(res) {},
				  fail(err){
					  console.log('err',err)
				  }
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: rgba(242, 245, 242, 1);
	}
	.invoice-box{
		padding: 30rpx;
		box-sizing: border-box;
		
		.invoice-box1{
			padding: 40rpx 30rpx;
			background-color: #fff;
			border-radius: 12px;
		}
		
		.invoice-box1-top{
			flex-direction: column;
			
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
			
			.name{
				font-family: Source Han Sans CN;
				font-size: 16px;
				color: #3D3D3D;
				margin-top: 8rpx;
			}
			
			.money{
				font-family: Source Han Sans CN;
				font-size: 24px;
				font-weight: bold;
				color: #3D3D3D;
				margin-top: 8rpx;
			}
			
			.status{
				font-family: Source Han Sans CN;
				font-size: 12px;
				color: #45C4B0;
			}
			
			.status2{
				font-family: Source Han Sans CN;
				font-size: 12px;
				color: #999999;
			}
		}
		
		.top-item{
			margin-top: 20rpx;
			
			.text1{
				font-family: Source Han Sans CN;
				font-size: 14px;
				color: #999999;
			}
			
			.text2{
				width: 80%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-family: Source Han Sans CN;
				font-size: 14px;
				color: #3D3D3D;
				text-align: right;
			}
		}
		
		.invoice-box2{
			padding: 40rpx 30rpx;
			background-color: #fff;
			border-radius: 12px;
			margin: 20rpx 0;
			
			.bot-item{
				margin-top: 20rpx;
			}
			
			.text3{
				font-family: Source Han Sans CN;
				font-size: 14px;
				color: #3D3D3D;
				white-space: nowrap;
			}
			
			.text4{
				width: 400rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-family: Source Han Sans CN;
				font-size: 14px;
				color: #999999;
				text-align: right;
			}
			
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>